<%@ page language="java" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script type="text/javascript">
    var contextPath = "<%=path%>";
    var code = "${code}";
    localStorage.setItem('defCode', code)
</script>

<title>机房大屏</title>
<head>
    <link rel="stylesheet" href="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/swiper-bundle.min.css"/>
    <style>
        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        @font-face {
            font-family: AlibabaPuHuiTi-Bold;
            font-weight: bold;
            src: url("<%=path%>/page/adminSystem/index/bigScreen/navigation/two/otf/AlibabaPuHuiTi-3-85-Bold.ttf") format("opentype");
        }

        @font-face {
            font-family: DINCond-Medium-Regular;
            src: url("<%=path%>/page/adminSystem/index/bigScreen/navigation/two/otf/DINCond-Medium-Regular.otf") format("opentype");
        }

        .numFont {
            font-family: DINCond-Medium-Regular;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            color: '#fff';
            background: #00040f;
        }

        body {
            display: flex;
            flex-direction: column;
            background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/bg_dynaic.gif') no-repeat;
            color: #fff;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            background-size: cover;
        }

        .title {
            height: 80px;
            line-height: 80px;
            padding-left: 38px;
            font-size: larger;
            font-weight: 600;
            text-align: center;
            padding: 0 10px;
        }

        .content {
            display: flex;
            height: 100%;
            margin: 0 10px 0 10px;
            padding-bottom: 10px;
            flex: 1;
        }

        .left, .right {
            width: 26%;
            /* border: 1px solid red; */
            display: flex;
            flex-direction: column;
        }

        .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            height: 50%;
            /* border:1px solid blue; */
        }

        .l-top, .l-bittom, .l-center {
            height: 33%;
        }

        .center {
            flex: 1;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
        }

        .warningSum {
            height: 25%;
            display: flex;
            justify-content: space-evenly;
        }

        .waringIcon {
            background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/addNum.png') no-repeat;
            background-position: right;
            width: 50%;
        }

        .waringData {
            width: 50%;
            position: relative;
        }

        .waringDataContent {
            top: 50%;
            transform: translate(10%, -50%);
            position: absolute;
        }

        .warningNum {
            color: #FF3D00;
            font-size: 30px;
        }

        .right, .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            display: flex;
            flex-direction: column;
        }

        .r-top {
            height: 32%;
        }

        .c-top {
            height: 80%;
        }

        .r-center, .r-bottom {
            height: 35%;
        }

        .module-title {
            background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/moduletitle-bg.png') no-repeat;
            background-size: cover;
            padding-left: 44px;
            font-size: 16px;
            line-height: 32px;
            font-family: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi';
            font-weight: bold;
            color: #FFFFFF;
            margin: 8px 0;
            font-style: italic;
        }

        .module-content {
            flex: 1;
            opacity: 0.9;
        }

        .bg {
            background: no-repeat center;
            background-image: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/chart_opacity_bg.png');
            background-position: 50% 62%;
        }
        #unnormalDevice canvas {
            cursor: default;
        }
        #d3Pie canvas {
            cursor: default;
        }
    </style>
</head>
<body>
<jsp:include page="title.jsp"/>
<div class="content">
    <div class="left">
        <div class="l-top">
            <div class="module-title">服务器</div>
            <div style="display:flex;justify-content: space-between;text-align: center;padding: 4px 0;">
                <div style="width:33%;display: flex;text-align:left;">
                    <div style="background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/cpu.png') no-repeat;width: 50%;background-position: center;background-size: contain;"></div>
                    <div>
                        <span class="fuwuqi-rate numFont" style="font-size: 30px;">0%</span>
                        <span style="display: block;">CPU利用率</span>
                    </div>

                </div>
                <div style="width:33%;display: flex;text-align:left;">
                    <div style="background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/ram.png') no-repeat;width: 50%;background-position: center;background-size: contain;"></div>
                    <div>
                        <span class="neicun-rate numFont" style="font-size: 30px;">0%</span>
                        <span style="display: block;">内存使用率</span>
                    </div>

                </div>
                <div style="width:33%;display: flex;text-align:left;">
                    <div style="background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/save.png') no-repeat;width: 50%;background-position: center;background-size: contain;"></div>
                    <div>
                        <span class="cunchu-rate numFont" style="font-size: 30px;">0%</span>
                        <span style="display: block;">存储使用率</span>
                    </div>

                </div>
            </div>
            <div style="padding-top:4px;">资源占用7天趋势图</div>
            <div class="module-content" id="deviceCPU" style="padding-top: 8px;height:100%;padding-left:10px;">

            </div>
        </div>

        <div class="l-center" style="display:flex;flex-direction:column;">
            <div class="module-title">应用</div>
            <div class="module-content" style="padding-top: 8px;display:flex;justify-content:space-around;">
                <div style="width:45%;text-align: center;font-size: 16px;">
                    <div style="height:200px;padding: 20px;box-sizing: border-box;" id="applyWeb"></div>
                    <div>WEB应用连通占比</div>
                </div>
                <div style="width:45%;text-align: center;font-size: 16px;">
                    <div style="height:200px;padding: 20px;box-sizing: border-box;" id="applyDatabase"></div>
                    <div>数据库连通占比</div>
                </div>
            </div>
        </div>

        <div class="l-bittom">
            <div class="module-title">告警信息</div>
            <div class="module-content alarmList">
            </div>
        </div>
    </div>
    <div class="center" style="display: flex;">
        <div class="back" style="margin: 8px auto;text-align: right;width: 100%;">
            <a href="<%=path%>/big/province" class="jump provinces" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
													       cursor: pointer;display:inline-block;background: #0D1119;border: 1px solid #015B87;">
                省直机关
            </a>
            <a href="<%=path%>/big/city" class="jump citys" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
                                                               cursor: pointer;display:inline-block;background: #0D1119;border: 1px solid #015B87;">
                市直机关
            </a>
        </div>
        <div id="deviceMap" style="flex: 1;"></div>
    </div>
    <div class="right" style="padding-right: 28px;">
        <div class="r-top">
            <div class="module-title">网络及安全设备监控</div>
            <div class="module-content" id="unnormalDevice"></div>
            <div style="text-align: center;position: relative;top: -20px;">
                <span style="display: inline-block; border-top: 10px solid #0B70BD;width: 35px;"></span>
                <span style="margin: 0 6px;">异常设备</span>
                <span style="display: inline-block; border-top: 10px solid #0B70BD;width: 35px;"></span>
            </div>
            <div style="display:flex;justify-content:space-around;">
                <div>设备总数：<span class="deviceTotal" style="color:#03A1D6;font-weight:bold;font-family:DINCond-Medium-Regular;font-size: 22px;">0</span></div>
                <div>异常设备数：<span class="abnormalTotal" style="color:#03A1D6;font-weight:bold;font-family:DINCond-Medium-Regular;font-size: 22px;">0</span></div>
            </div>
        </div>
        <div class="r-center" style="height: 35%;">
            <div class="module-title">7天告警概况</div>
            <!-- style="padding: 0 12px;" -->
            <div class="module-content"
                 style="display:flex;justify-content: space-between;
																padding: 6px 0;color:#fff;height: 50%;">
                <div class="alermTotal"
                     style="width:33%;background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/alarmTotal.png') no-repeat;text-align: left;
                             background-size:contain;background-position: center;transform: translate(10px, 10px);">
                    <div class="total numFont" style="font-size: 30px;padding-left: 72px;box-sizing: content-box;">0
                    </div>
                    <div style="font-size: 12px;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #FFFFFF;
											text-shadow: 20px 0px 50px #000000;padding-left: 72px;box-sizing: content-box;">
                        告警总数
                    </div>
                </div>
                <div class="dealedNum"
                     style="width:33%;background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/dealedNum.png') no-repeat;text-align: left;
                             background-size:contain;background-position: center;transform: translate(10px, 10px);">
                    <div class="processed numFont" style="font-size: 30px;padding-left: 72px;box-sizing: content-box;">
                        0
                    </div>
                    <div style="font-size: 12px;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #FFFFFF;
											text-shadow: 20px 0px 50px #000000;padding-left: 72px;box-sizing: content-box;">
                        已处理告警数
                    </div>
                </div>
                <div class="undealNum"
                     style="width:33%;background: url('<%=path%>/page/adminSystem/index/bigScreen/navigation/two/img/undealNum.png') no-repeat;text-align: left;
                             background-size:contain;background-position: center;transform: translate(10px, 10px);">
                    <div class="unprocessed numFont" style="font-size: 30px;padding-left: 72px;">0</div>
                    <div style="font-size: 12px;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #FFFFFF;
											text-shadow: 20px 0px 50px #000000;padding-left: 72px;">未处理告警数
                    </div>
                </div>
            </div>
            <div style="border-top:1px solid #027CDB;border-bottom:1px solid #027CDB;
						    text-align:center;line-height: 25px;color:#027CDB">今日新增告警数<span class="todayCount" style="margin-left: 10px;font-family:DINCond-Medium-Regular;font-size: 20px;">0</span>
            </div>
            <div style="padding-top:4px;">近7天每日告警数</div>
            <div class="module-content" style="display:flex;justify-content: space-between;
																						    padding: 6px 0 6px 10px;color:#fff;height: 50%;"
                 id="latestBar">
                <div></div>
            </div>
        </div>
        <div class="r-bottom">
            <div class="module-title">设备类型分布</div>

            <div class="module-content bg" style="display:flex;justify-content: space-between;
												 padding: 6px 0;color:#fff" id="d3Pie">

            </div>
        </div>
    </div>
</div>
</body>
<script src="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/jquery-3.7.0.min.js"></script>
<script src="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/echarts.min.js"></script>
<script src="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/g2.min.js"></script>
<script src="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/swiper-bundle.min.js"></script>
<script src="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/g2plot.min.js"></script>
<script src="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/echarts-gl.min.js"></script>
<script src="<%=path%>/page/adminSystem/index/bigScreen/navigation/two/rackcenter.js"></script>
</html>
